<template>
    <div class="port-page">
        <!-- 顶部按钮 -->
        
       <el-form label-width="100px" class="form">
       	<div class="but1" style="margin-left: 30px;">
      		<router-link to="/home">
      			<el-button type="warning" size='small' class="add btn" style='margin-right: 10px;' icon="el-icon-menu">首页</el-button>
      		</router-link>
          <!--<el-button type="primary" size='small' class="add btn" @click='componentsShow("")' icon="el-icon-edit">编辑</el-button>
          <el-button type="success" size='small' class="add btn" @click='componentsShow("bq")' icon="el-icon-star-off">标签</el-button>
          <el-button type="danger" size='small' class="add btn" @click='componentsShow("time")' icon="el-icon-tickets">标签页</el-button>-->
	     </div>
       		<div style="float: left;text-align: left;padding-left: 33px;font-size: 16px;width: 100%;margin-top: 10px;">基本信息</div>
         <el-form-item label="学校名称" style="margin-top: 20px;">
           <el-input v-model="xxmc" type="text"  placeholder="请输入" class="select-block"></el-input>
         </el-form-item>
         <!-- <el-form-item label="logo" >
           <el-upload
			  class="avatar-uploader"
			  :action="url1"
			  :show-file-list="false"
			   :on-success="handleAvatarSuccess"
  				:before-upload="beforeAvatarUpload">
			  <img v-if="imageUrl" :src="imageUrl" class="avatar">
			  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
         </el-upload>
         </el-form-item> -->
         <el-form-item label="地址">
           <el-input v-model="dz" type="textarea" :rows="4" placeholder="请输入" class="select-block"></el-input>
         </el-form-item>

         <el-form-item label="简介">
           <el-input v-model="jj"  type="textarea" :rows="4"  placeholder="请输入" class="select-block"></el-input>
         </el-form-item>
<!--
       		<div style="float: left;text-align: left;padding-left: 35px;font-size: 16px;">欠费缴费模版</div>
         <div class="mb" style="width: 100%; float: left;">
         <el-form-item label="催缴通知" style="margin-top: 50px;float: left;width: 48%;">
           <el-input v-model="cjtz"   type="textarea" :rows="10" placeholder="请输入"  class="select-block"></el-input>
         </el-form-item>
         <el-form-item label="欠费通知"  style="margin-top: 50px;float: left;width: 48%;">
           <el-input v-model="qftz" type="textarea" :rows="10" placeholder="请输入" class="select-block"></el-input>
         </el-form-item>
         </div>-->
         <el-button type="primary" class="submit" v-if="qxbtn.frmrsxxjbszedityn" :disabled="xg" @click="submit">修改</el-button>
       </el-form>

        <!-- 动画加载 -->
        <LoadingComponent v-show="isLoading"></LoadingComponent>
        <EditComponent v-if="portComponents.edit.toggle" @close="componentsHide" :params="portComponents.edit.params"></EditComponent>
        <BqComponent v-if="portComponents.bq.toggle" @close="componentsHide" :params="portComponents.bq.params"></BqComponent>
        <TimeComponent v-if="portComponents.time.toggle" @close="componentsHide" :params="portComponents.time.params"></TimeComponent>
        <router-view class="port-view"></router-view>
    </div>
</template>
<script>
    import { mapState } from 'vuex'
    import LoadingComponent from 'components/loading'
    import EditComponent from './edit'
    import  BqComponent from './bq'
    import TimeComponent from './time/list'
 	import qs from 'qs'
    export default {
        components: { LoadingComponent, EditComponent, BqComponent, TimeComponent},
        data () {
            return {
            	qxbtn:{
					//学校基本设置
					frmrsxxjbszedityn:false,
				},
              xg:true,
              xxmc:'',
              tp:'',
              dz:'',
              cjtz:'',
              jj:'',
              qftz:'',
              imageUrl:'',
//            url:'http://192.168.3.150:8098/jiayin-controller/user/saveimg',
              url1 :'',
            /*模糊搜索条件*/

				/*动画加载*/
                isLoading: true,//动画加载
                searchLoading: false,//搜索按钮触发按钮动画


                /*组件区域*/
                portComponents: {

                    /* 编辑 */
                    edit: {
                        type: 'edit',
                        toggle: false,
                        params: '',
                        data: {}
                    },
                    bq: {
                        type: 'bq',
                        toggle: false,
                        params: '',
                        data: {}
                    },
                    time: {
                        type: 'time',
                        toggle: true,
                        params: '',
                        data: {}
                    }

                },

            }
        },
        created () {
        	 var logininfo = JSON.parse(localStorage.logininfo) ;
            		 	this.qxbtn.frmrsxxjbszedityn = (logininfo.auth.indexOf("frmrsxxjbszedityn")!=-1);
        	this.url1 =this.$store.state.api+"/user/saveimg"
//      	this.url1 ="http://192.168.3.150:8098/jiayin-controller/user/saveimg"
            if(this.$route.query.frompage == 'xsadd'){
            	this.componentsShow('time')
            }

            //加载页面时调用
            this.$store.dispatch('changeTitle','学校基本设置');//修改title
            this.$store.dispatch('changeRouterIndex','/admin/xxjbsz');//修改路由
            this.search();//分页获取默认数据
            this.isLoading = true;//动画开始

        },
        watch:{
             'xxmc':function (val) {
               if(val != this.xxlist.mc){
                 this.xg = false;
               }else{
                 this.xg = true;
               }
             },
             'dz':function (val) {
               if(val != this.xxlist.dz){
                 this.xg = false;
               }else{
                 this.xg = true;
               }
             },
             'jj':function (val) {
               if(val != this.xxlist.jj){
                 this.xg = false;
               }else{
                 this.xg = true;
               }
             },
             'cjtz':function (val) {
               if(val != this.xxlist.mb1){
                 this.xg = false;
               }else{
                 this.xg = true;
               }
             },
             'qftz':function (val) {
               if(val != this.xxlist.mb2){
                 this.xg = false;
               }else{
                 this.xg = true;
               }
             },
         },
        mounted () {
            //加载完成之后event
            this.isLoading = false;//动画结束
        },
        methods: {
		  handleAvatarSuccess(res, file) {
       		 this.imageUrl = URL.createObjectURL(file.raw);
	      },
	      beforeAvatarUpload(file) {
//	        const isJPG = file.type === 'image/jpeg';
	        const isLt2M = file.size / 1024 / 1024 < 2;

//	        if (!isJPG) {
//	          this.$message.error('上传头像图片只能是 JPG 格式!');
//	        }
	        if (!isLt2M) {
	          this.$message.error('上传头像图片大小不能超过 2MB!');
	        }
//	        return isJPG && isLt2M;
	        return isLt2M;
	      },
          cancelf () {
            //sonpage 关闭
            this.$store.dispatch('changeTitle','首页');//修改title
          // this.params.toggle = false;
//          this.$emit('close',{type:'time',cancel:true})
          },

       search () {
		    //查询搜索触发事件
         var logininfo = JSON.parse(localStorage.logininfo) ;
           this.searchLoading = true;
           this.axios.get(this.$store.state.api + 'xx/info',{
               params:{
                   yhid:logininfo.id,
                   xxid:logininfo.xxid,
               }
           }).then( res => {
               console.log(res)
               this.xxlist = res.data.data
               this.xxmc = this.xxlist.mc
               this.dz = this.xxlist.dz
               this.jj = this.xxlist.jj
               this.cjtz = this.xxlist.mb1
               this.qftz = this.xxlist.mb2
           }).catch( res => {
               console.log(res)
               this.searchLoading = false;
           })
       },
   submit() {
        this.$confirm('是否确定修改信息?', '提示', {
				 confirmButtonText: '确定',
				 cancelButtonText: '取消',
				 type: 'warning'
			 }).then(() => {
         //装载数据
         this.$store.state.loading = true;
 					var logininfo = JSON.parse(localStorage.logininfo);
 					var params2 = qs.stringify({
 						dz: this.dz,
 						mc: this.xxmc,
             mb1:this.cjtz,
             mb2:this.qftz,
             jj:this.jj,
 						yhid: logininfo.id,
 						xxid: logininfo.xxid
 		     })//执行
  				    this.axios.post(this.$store.state.api + 'xx/update',  params2 )
  						.then(res => {
  							if(res.data.code == 1) {
  								this.$emit('close', { type: 'edit', cancel: false });
  								this.$store.state.loading = false;
                  this.$message.success("保存成功!");
                  this.search()
  							} else {
  								this.$message.error("保存失败："+res.data.msg);
  							}
  						}).catch(res => {
  							this.$message.warning("服务器异常");
  							this.$store.state.loading = false;
  						})


			 }).catch(() => {
				 this.$message({
					 type: 'info',
					 message: '已取消'
				 });
			 });

 			},




            /* 组件的弹框  */
            componentsShow (type,data) { //显示组件
                console.log(type,data)
                for ( let i in this.portComponents ) {
                    if (type == this.portComponents[i].type) {
                        this.portComponents[i].toggle = true;
                        this.portComponents[i].params = data;
                        if (this.portComponents[i].data.type == 'single') {
                            this.portComponents[i].data.index = data.row.id
                        }else if(this.portComponents[i].data.type == 'multiple'){
                            this.portComponents[i].data.index = this.multipleDelNum;
                        }else{
                            return;
                        }
                        return;
                    }
                }
            },
            componentsHide (setting) { //关闭组件
                console.log(setting)
                for ( let i in this.portComponents ) {
                    if (setting.type == this.portComponents[i].type) {
                        this.portComponents[i].toggle = false;
                        if (!setting.cancel) {
                           this.search();
                        }
                        return;
                    }
                }
            }
        },
        computed: {
            ...mapState([
                'api'//域名
            ]),
            multipleDeleteDisabled () {
                console.log(this.multipleDelNum)
                if (this.multipleDelNum) {
                    return false;
                }else{
                    return true
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    .port-page {
      height: 100%;
        font-size:12px;
        .btn {
            height: 30px;
            padding:0 10px;
        }
        .form{
          background: #fff;
          margin-top: 15px;
          padding-top: 20px;
          border: 1px solid #CCCCCC;
          .select-block{
              width:98%;
              float: left;
          }
           .select-block1{
              width:200px;
              height: 200px;
              float: left;
          }
          .submit{
          	width: 120px;
			display: block;
			margin: 0 auto;
			margin-top: 20px;
			/*float: left;*/
          }
           .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px dashed #CCCCCC;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
        }
    }
</style>
